// 装path依赖需要 npm init  
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    // path需要动态获取文件的路径 需要用到node语法
    // _dirname 代表当前目录，后面dist参数 代表当前目录下面的dist文件夹
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // 加一个publicPath file-loader可以找到对应的文件
    publicPath: 'dist/'
  },
  // 配置css loader
  module: {
    rules: [
      {
        //正则表达式 表示匹配所有css文件
        test: /\.css$/,
        // css-loader用来进行加载css文件 style-loader执行
        use: ['style-loader', 'css-loader']
      },
      // 配置less
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
          },
        ],
      },
      //配置图片加载的url-loader和file loader
      // {
      //   test: /\.(png|jpg|gif|jpeg)$/i,
      //   use: [
      //     {
      //       loader: 'url-loader',
      //       options: {
      //         // 当图片小于以下字节大小的时候，会将图片编译成base64字符串形式
      //         // 当图片大于以下的时候 需要用到file -loader
      //         limit: 9999,
      //       },
      //     },
      //   ],
      // },

      //配置file-loader
      {
        test: /\.(png|jpe?g|gif|jpeg)$/i,
        loader: 'file-loader',
        options: {
          name:'img/[name].[hash:5].[ext]'
        },
      },

      //es6转换为es5
      {
        test:/\.m?js$/,
        exclude:/(node_moudles|bower_components)/,
        use:{
          loader:'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      }
    ]
  }
}

// 配置完webpack.config.js之后就可以直接用webpack命令来打包